<template>
  <div class="detail">
    <header class="header">
      <van-icon name="arrow-left" @click.stop="$router.go(-1)" />
      <div class="right">
        <div class="shop">加入购物车</div>
        <van-icon name="shopping-cart-o" />
        <div class="img-box" @click.stop="showPopup = true">
          <svg
            t="1676894821141"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3745"
            width="16"
            height="16"
          >
            <path
              d="M512 64v64C299.936 128 128 299.936 128 512s171.936 384 384 384c208.8 0 378.688-166.688 383.872-374.24L896 512h64c0 247.424-200.576 448-448 448S64 759.424 64 512C64 267.904 259.2 69.44 501.984 64.096L512 64z m380.8-3.2a32 32 0 0 1 31.776 28.256l0.192 3.712v224a32 32 0 0 1-63.776 3.744L860.8 316.8V176.224L438.624 598.432l-45.248-45.28L821.76 124.736 668.8 124.8a32 32 0 0 1-31.808-28.256L636.8 92.8a32 32 0 0 1 28.288-31.776l3.712-0.224h224z"
              fill="#151515"
              p-id="3746"
            ></path>
          </svg>
        </div>
      </div>
    </header>
    <section class="book-info" v-if="bookInfo" title="书籍简介">
      <div class="first">
        <div class="img-box" :style="{ backgroundImage: `url(${img})` }"></div>
        <div class="right">
          <div class="title">{{ bookInfo.entry.title }}</div>
          <div class="cauter">
            <span class="category">{{
              bookInfo.entry["pris:book"].category
            }}</span>
            | <span class="author">{{ bookInfo.entry.author.name }}</span>
          </div>
          <div class="rate">
            <van-rate
              v-model="rate"
              :size="'0.12rem'"
              color="#fefd21e"
              void-icon="star"
              void-color="#eee"
              allow-half
              disabled
              disabled-color="#ffd21e"
            />
          </div>
          <div class="click-count">
            {{ bookInfo.entry["pris:subscribe"].clicksCount }}点击
          </div>
          <div class="price">{{ bookInfo.entry["pris:book"].price }}阅点</div>
        </div>
      </div>
      <div class="des" :class="{ 'my-text': !desShow }" ref="des">
        <span
          v-for="(text, index) in bookInfo.entry.summary.split('。 ')"
          :key="index"
        >
          {{ text.replace(/。/g, "") + "。" }}<br />
        </span>
        <div class="icon" @click.stop="desShow = !desShow">
          <van-icon v-if="!desShow" name="arrow-down" />
          <van-icon v-else name="arrow-up" />
        </div>
        <div class="tag">
          授权方: <span>{{ bookInfo.entry["pris:book"].authorizer }}</span>
        </div>
        <div class="tag">
          作品类型: {{ bookInfo.entry["pris:book"].paydesc }}
        </div>
      </div>
      <div class="chapter" @click.stop="showChapterList = true">
        <van-icon name="bars" />
        <div class="text">
          共{{ bookInfo.entry["pris:book"].totalArticleCount[0] }}章
        </div>
        <div class="tag">连载中</div>
        <van-icon name="arrow" />
      </div>
    </section>
    <section class="comments" title="评论">
      <div class="comments-header">
        <div class="title">评论</div>
        <div class="btn">
          <van-icon name="edit" />
          <div>写评论</div>
        </div>
      </div>
      <div class="comments-content" v-if="commentsList?.length">
        <CommentItem
          v-for="(comment, index) in commentsList.slice(0, 5)"
          :key="index"
          :comment="comment"
        />
        <div class="btn" @click.stop="showCommentDetail = true">
          查看全部评论
        </div>
      </div>
      <div v-else>暂无评论</div>
    </section>
    <footer class="footer">
      <div @click.stop="addBookself">
        {{ !isInBookself ? "加入书架" : "移出书架" }}
      </div>
      <div>购买</div>
      <div class="bgc-red" @click.stop="toRead">免费试读</div>
    </footer>
    <transition name="componentTab">
      <CommentDetail
        v-if="showCommentDetail"
        :bookId="bookInfo.entry.id"
        :commentsList="commentsList"
        @changeShowCommentDetail="showCommentDetail = false"
      />
    </transition>
    <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{ height: '2.1rem' }"
    >
      <div class="popup">
        <div class="text">分享至</div>
        <div class="popup-icon">
          <div class="select" @click.stop="$toast('开发中')">
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="53px"
                  height="53px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="53px"
                    height="53px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAMAAADWOFNCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC6FBMVEXw8PDy8vL19fX39/f6+vr8/Pz7+/v9/f3+/v7////29vbx8fH4+Pj89PTzzsrrq6TrqqPsrKXutbDzzMj66uj//v766ObrqKLgenDge3HhgXfkjoXpo5zxxsL78fD88vHyyMTqo53on5jmlY3jiH/gfHLki4LttbD66+r++/v67ev23Nn22NX55+X++vn88vL55eP44uD00c3ttK7kjITihXz9+fj339zvvbfqpZ7nmZHmlo7popv88O/22df22db44+H89PP77+7yysbnmJHjiYDxw7/66+nwwbzonJTihHv55+b219TnmZLnlo/onpfuuLL44t/99vXzzcn56uf+/f333drsrafnmpP33Nn66efxxcHvvLfqpp/kj4frqKH44d788fDuuLPjioHxx8P22tfonJX11NH33dvutrDxwr755uPuurTkj4btsqzhf3brrKXpoJnhgHbljobom5TgfXPjh3377uz56efqqaLnl4/44d/55OLnmJDpn5j44N7hfXPhfnT9+PfxxMDlkIj108/78O/tsavig3nhfnXkioHpoZrqpZ/mlIz11tP//f300Mzmkor109DrqaLyycXkjYTki4Pvvbj45OHsrqjkjob0zsv99/b66unttK/hf3Xqp6Dqo5zhfHLihXv56Ob77u3yx8Pvu7b++fnzzMfljoXkioLutrH55uT67Or00c7xwr3wvrn11dLxxsHigXjqpJ734N3ignn33Nrsr6nlj4blkoruubTonZb34N7///7ig3r89fT99PTvubT88/Ljh37rqaPon5fwv7vts63hgnjwv7rhfXT229jssKr77ezvubPlkonrq6X3393onZXppJ3lkIf9+Pjyx8L00s7ml4/nnJT00M3nnJXmlY767Ov++vruubPkiYDkjIP0z8zmlIvssavut7LzzcrqpqDxxL/88/H+/Pzom5PkjYXvu7XzysbwvbjnmpLjhXz9+fnmk4v329n99fUF5O8aAAAAAWJLR0QJ8dml7AAAAAd0SU1FB+cCFgogNp+O7lQAAAMXSURBVEjHY2CAAkYmZhZWfICFmYmRARUwMrOxc3Bw4gUc7KzMKPqY2AjogGlk44Lr4eZiJUoPCLAzc0N1MbMTrQmkDeo84m0CawM7kpGNJE2cnKygIGEmLiCQgoSHDKvAljGREhRQy7hIdyDYiSyk6+JkYyAt2CGAnRa6ePn4BQSFhEVESdIlJi4hISklLSMrR4oueQVFJWUVSVU1dQ3CujS1tHV09YAMUX0DQ20jYxMJU2M5ArrMzC0sraxt+MyAbFs7ewdHJ2cXCVc3Uby63D08vSSB3rH0BnJ8fP38AwKDgk1UPUPw6AoNC3cF6gGCiEggNyo6JjYuPiExSTI5Bbeu0FQbKQkISEvPiA7IzDLPzsnNc7RXyS/AqSvUrrAIqkmi2LJEpVSyzLi8orKquqZWsg6nrnoZuCaJhkYwZZ3a1NzSGiUjkYZLV1t7B1hlZ1dVd49NrYoqkN3b1z9h4iT3yTh19U+ZClQmOS12erC9oe6M1CkzZ0lKTJw9R0R4rtO8+Qtw6HJfuEhCYrGl8xI9qClLlylLeNUtNw/lXGHuoYND18pVEhKr16zVW7d+w0a3TW3AaA3a7CohsWXrNrQoRdFlLCWxfc1SzR07dzVK5O/eowsU0l0AdPP2THy6BCQl9u7b72A5X0KixeqA6fKDnJyHYkChE4tP12QJicNHOD1Mi9SOKh07KnHckJOzyQMUB/z4dLXPlzgxR/TkqQVTTvurnJGwOgvMKgFAXUdP4NO1TE3i3Pn+CxeNRJdeAiq2WcspenmvhITqFUN8upZcbbzGd32TTZJ9tLKEhGvW9f3la7ZLSE69oYlPl+jNW42374goxN51Ve24t/H+g7UPH0lIPj59hBOfLs4HT5S8ni5fH/3s0sznLwwvO7/0kpCqffWaE78uzjf1z9++UxZ4H/3hxsedn7xUP1e123/hJKQLmP2r3WbaRCjv3r37a5W/wMZv3zk5idAFBJpOhjrp6embtKPmcGIHNCl7ceoir04hr/4ir64kr14mrw1AZnuDvLYNme0oMtts5LUPyW2LktruBQARPhUxXVPtpQAAAABJRU5ErkJggg=="
                  />
                </svg>
              </div>
              <div class="name">新浪微博</div>
            </div>
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="53px"
                  height="53px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="53px"
                    height="53px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAMAAADWOFNCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACf1BMVEXw8PDx8fH19fX39/f6+vr8/Pz7+/v29vby8vL9/f3+/v7////4+Pj09PT5+fn++fn66+n56ef9+fj88/H22tf439388vH44+Hxwr3rqqTonpbpoJjxxcD66efxxL/nmZLpo53uubP++fj+/PvvurTnm5PjiH/hfXPgenDgfHLljoXxwbz11tPnmpPge3Hig3rnlo7uta/44t///v789PPzzcnon5jihXzmlY3zzMnyycTignnpoJnzz8v+/Pz88vDxw7/lkIjhf3bqqKH119Pqpp/hfXTmlIzzy8jxw77kjYTkjITzy8fhf3X00M3++vnlj4bhfnTrqaP22dXmk4vonZX55uT33tzonpfnmJD00c3srabts67++/v99fTuubTignjxxcHwwLv44N733NnnmpLvu7byycXut7L+/f3wwr3ihHvhgXfpn5jsr6nsr6rzzcrzzMj99/fsrqjki4PrqqP11NH44d777+377ez67Oryx8PkjYX55eP55OLpoZrjhXzyysb55+X88/LvvLfjiYD00s733Nrtta/zzcj66unqqKLjh3722tjnmZHkjIPlkYjwv7n++vr33dvyyMT229jutrDzzsvhgHbonJX99vbzzsrttK788fDvubTkjoX9+Pf99fXvurXihXvnl4/008/qqaLmlo777ev12NXhgHfig3nutrH77uz23NnnnJTuuLLyysfuuLPqpZ/nmJHkioHrp6H44N///f3yysXki4LvvLjwv7v22Nb22dbqpJ3ttK/wvrnwwbz99/byy8blkonigXjrq6X99vX55eLpopvjhn3ts6356Obxwr7onJTlkYnsraf9+Pj00s/11NCX2IHJAAAAAWJLR0QLH9fEwAAAAAd0SU1FB+cCFgohKpKUg1oAAAK3SURBVEjHY2CAAkYmZhZWfICNmZ2DARUwsrNxcnFx4wVcnKw8KPp4WTi5iQFcrOwITeysXERpAgJOHka4JmL1gKzjgTqPFE1AbWBHMrIQ7TyoI0FBwk5cQCABHpBVpGoCWcZEmq/AgJ0MB4KcyEdiWIAAKwMOb/ELCAoJi4iKYZXkYmDDpkVcQlJKWkZWTl5BUUQJiwIsupTFVVTV1DU0tbR1dPX0DQyNjInQZWJqZq4BApoWllb6GhrWNrZ2BHXZOzhqakCAk7OLK5Byc/ewI6BLzNNLAw685Xx8gZS6ux9+Xf4+AQhNGoFBwSFgOjQMr67wCD0kXRqRUdFg2jomFo+uuPgEZE0aAYlJYFrPMRmPrpRUFE0aamnpEIZ+Bm5dmVnZMPU5jrlBefkxBYUQrmZqEU5dYsUQX2mWlHqWlctWVFRWVUNNqanFqauuHqyiwbWxCer75haortY2nLraVUEKSjoKO2Emd3VDdfVY4dTV2weU70+zLZ0wcRJYwHgyLPp6puDUNVUeKD1tuusMvZmiYIFZiYGE7UqO0AgsnR00AxjSc+aCPRqhQdhflUEa7tXzwKE/v3oBN/dCuRwNwmE4adHiaVNCIKnBwm+BXcoSmCbNPtzxxb102RRDN4g69eWNK1YuXwXVtXoNnhS1dl3jepjxejUb2jZu2rzFcataq+O27Xh07Zi0cxciFeak7o5aWjhFxmGPw147PLq4ufdFImcVN6/9Bw4mVu85JM6NV9fhI0dRchgYHDu+Fr8u7hON7upomlaXnuQmoIv7cNup08h61L3OnOUmqIs7MywNVB5Ci45+hfRmbiJ0gcrec6Xn3SdMuGAhdTFdAIsCXOX8pbP7Ll++MlUgFpskF5l1Cnn1F3l1JXn1MhlO5CO7vUGqz7jYKWhHkdlmI7N9SGZblNR2LwCWchATZgie2QAAAABJRU5ErkJggg=="
                  />
                </svg>
              </div>
              <div class="name">分享到阅读圈</div>
            </div>
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="54px"
                  height="53px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="54px"
                    height="53px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA1CAMAAAA9D+hBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEXw8PDx8fH09PT39/f5+fn8/Pz7+/v29vby8vL9/f3+/v7////6+vr19fXz8/P4+Pj88/L00MztsKvrq6XsrKbvurT55+X9+PfzzMjlkYnhfXPgenDge3Hig3nqpp/88fD66efrqaLgfHPkjIPon5jpopvpoZrnmZHhf3b00s744d/pn5jmlI3yysb44t/45OL44+H229jtsq3hgHfxwr744d7rrKX99/b+/f3wwr3tsav77uz89PP339322tf229n56Ob77u3onZXnmJDnmZLsr6n0z8vge3Lml4/66ejxxMDwwLvwwbz00M399vX33tz55OL9+Pj33NrrqqP0zsvhf3Xki4L00c355uTvvLfutrH66uj//f344uDmlIzyycX//v788vHssavrqaPki4Ponpfpo5zutrD+/PvuuLLpoJnnmJHig3r10s/hgXf23Nn44N3gfXPqp6D88/Ptsazjhn3nmpLsrafvurX+/fzut7LqpZ711tP9+fnww77lkIjhfnTts63srqjxxcA7U5FjAAAAAWJLR0QLH9fEwAAAAAd0SU1FB+cCFgoiCGzZkX0AAAHJSURBVEjHxZb3U8IwFIBbKCCNAwVnnCwRFXEhLgTcCogT3BsX7r3XP24LB1KujWnuOL+fkut9l5d3zXuPolLQCiWjQqFWavKoLGiNWsuyAAnLqhihqMjXAhxYlTLDKlCzWBYvMnTaUuFKCS8VoVqGxXnJOGkGO8Ik2kLZISbgr0czci3AcscpZB8GgJIkRi5KiiqSmZBEUihK/tU4/lXTFZfoxTCUliG08orKKihGdU1tnbRW3wCNJrMlG2ujDdY0SWv2ZtjS6mjLxtneATu7pLVuM3T1iGTA7YCdvUitTzRz/X9rA4MeAUNeAHx/ax7/sICRUSxtzCZM/vgEljY5NS0gEMTSxMidFnLOpAnPYmtzFn+a+UFsbWHxN4tLEWwturySJrCa25ToxX7ltXWkxj2cjU27kyPs2+L27m1+7Vz37CAfTv0uNO7tWzliB3Y3OIwe8Wvr8YkNxk+ltYyicBY71124LlNFIX6FKArgOnhj4NGbb213pbHLxY3dxP7+wQsQWopH75OJP+P55VU0s5J1cvvt/WPps0z8I6K8hiJf3zogW0NC3HEI+xthNyXs3YSTAulcQjgFkc5cpBMe6TxJOr3KnZV/AAryvvo8+maTAAAAAElFTkSuQmCC"
                  />
                </svg>
              </div>
              <div class="name">私信分享</div>
            </div>
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="52px"
                  height="54px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="52px"
                    height="54px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA2CAMAAAC/bkrSAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACRlBMVEXw8PDx8fH09PT39/f5+fn8/Pz7+/v29vbz8/P19fX6+vr9/f3+/v7////4+Pjy8vL//v39+fH58N39+vX0477u0pn79ej68uHryobow3by3LD9+vPy3rTnwG/nwG7ryYX58N7qyIHnv23ownPv1qL+/Pny3K/nv27qxn7369D+/fv47tjqx4DowXH8+O/w2anpxHn15cP37NTpxn3nwHDszY789+3+/v3+/fr+/Pj9+fL89+z579z57tn26czu1J3ownTx3K747db57tr68uL79Of9+/T79Obz4brx2anw16Xv1aDv1Jzu0Zftz5PtzpDszpDszIvoxHjnv2/szo/tz5Hu0pjv05zw2Kfx2qv04r7//v789uv04rzqx4Ht0JPv1qHx2ajx263x2qzv1Z7szIr25sf9+vT36cztz5LowXLpxXzu1Jvw16Ty3bHz4Lj68+T8+PD479r47NP+/Pf47NTu0prpw3fqyIL89+7+/vz68d7v16PowXDv1Z/68N/v1qPow3fow3X47NX9+/f47df//vzx2qrpxXvz3rT79ef36s7y37X9+/b258jszYz15sfownX48Nz9+/X36tD++/fryofz37b///7++/b258ntzo/qx3/8+O7y26726Mz579vx2qnsy4jv1J7v05vnwHHszo7u05rowHHryYT57tj79enz4bn579rpxHrw2KbqyYP579ny3rX9+fPpxHj048D15sXnwXL47tf+/fny3bDsy4nw2Kj15ML9+fDz37f8+fD69OXTpwZUAAAAAWJLR0QN9rRh9QAAAAd0SU1FB+cCFgoiHHYDRQAAAAKHSURBVEjHY2CgADAyMbOw4gNszOwcaFo4ubh5eHjxAh4ebhZkbRws3AR0QPVx8zHC9DCxEaUFrI2Fn2Q9IF1guzi4SNAD1AVyISMfSXqAupiAjmMlTQ8vLxcjA6kWga1iI1UPLy8fA8muA7qPgWTX8fJyM+CSERAUwmkeTk3CIqJipGoSEJeQlOIhUZO0jKycvBBpmgQUFJWUlFVUSdIkqKaupKSuoUmKJi1tHSUg0BWVJkGTnr46SJOSgSHxmrSMjMF6lExMzQhoMrewtLIWE7ex1bazh1ikpOTg6KTt7OJq7WahhVWTgLuHp5e3j6+ff0BgkKw6BAQbhASEhoV7R0RGWWDTFB0TGwixQN0hLj4hMQkMklOCwWKpaVg18fKmZ2TKgjVlZZvm5OblpxVYFRalgAxS9y3G7jwgKCkty4J6RsmkvCK5sqq6BiRQW1ePJ/QshBoaYbqaUppbWsNMQCxPd7xB3lbQbgDxV0eki0VxJohl3KlHIJ4EuhJB/pKt8LC27A4Bac/q6SUYuap9QBfp9hv2Ck9IBds5cRLhFDE5CqhOdIrF1L5p0PjtJqzJarp6h5fQDN6ZsyJFZ88pl1XKmk5Y09x5E8PmuwCB+IK+2IU+i7J1FxPWJJbS5O+zBAJ86nxmKy71FyCoyWU21CvLlndAAn9OOkFN1WD/r1jZvmr1mhBw+pjoSkjTjLXAPKu+LnyWMDBbLVi/QQ5YVGwkpKlqiiTQZZsghs/YPCFsi1LWVkKaLLdtV/TasRPGFejatdthDyFNqt1he/ehCBQn7CekSeDAwRlovkxfjaGJrFqDrPqJrJqQrDqXrNqdrHYEWS0W8tpG5LXCyGvvkdeyJLUNCwCOqPwYdtrw4AAAAABJRU5ErkJggg=="
                  />
                </svg>
              </div>
              <div class="name">QQ空间</div>
            </div>
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="53px"
                  height="53px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="53px"
                    height="53px"
                    xlink:href="data:img/png;base64,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"
                  />
                </svg>
              </div>
              <div class="name">QQ好友</div>
            </div>
            <div class="select-item">
              <div class="img-box">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="53px"
                  height="53px"
                >
                  <image
                    x="0px"
                    y="0px"
                    width="53px"
                    height="53px"
                    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAMAAADWOFNCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA+VBMVEXw8PDx8fH19fX29vb5+fn7+/v8/Pz09PT9/f3+/v7////6+vrz8/Py8vL39/f3/Pzm9fTe8vDk9PP1+/v+///5/fzp9vXj9PLy+vrz+vrj9PPo9vX4/Pz7/f3F6OW95eHD5+Tb8e/2+/v8/v7H6ea+5eLC5+PX7+30+/rY8O7C5+S+5eHh8/Lw+fnJ6ue65ODE6OTr9/bP7Orl9fPn9fTN6+ns9/bG6ea/5uLv+fjM6+i+5uLh8/HK6ufu+Pf2/PvQ7eq85eHO6+nx+fnt+PfL6ufV7uz3/PvW7+zO7OnT7uvq9/bY8O3S7ev6/f3n9vTX8O3w+fj9/v4OZLGPAAAAAWJLR0QKaND0VgAAAAd0SU1FB+cCFgokGsk6R7MAAAFJSURBVEjH7ZbbUsIwEIbTI20qSi1SqsUqoGgV47GKqOARq4LC+z+MWztKHWdis9fdq+8i3+xkk5n9CUlLkhVV03mlqUpJItmSZM0wTcov0zQsOeMtWAbNV4Za/pG0/9pkGlrlbym3M9ckK3+nL01N7iaLSXA3GVrpghKlliTeCpqVyCLCUojgLNJ5EPFrUaqRvL8iW3phFVZOa6liLzvVhFZqtltPfnbVW7XXfJ7VsNeDjc0mUMttb213PKCd3XCvvd/iWN0DxtjhEZB3DBSeAJ2GQGd1jhWdw4mLGlDvEqh/BeT2ga5vONZgeMvY3T2Q3wngbAT08MhY8DTiTSN6jl9eGwn13uJxZQIweR/HH79a/Z38YNqcpeR3nXQEM2c6onwL9V6FVVhzC7dTcPsLtytxexmXAXB5A5ltcDkKmdmQ+RCZRYVz7yevrnlaX0PfXwAAAABJRU5ErkJggg=="
                  />
                </svg>
              </div>
              <div class="name">更多</div>
            </div>
          </div>
        </div>
        <div class="btn" @click.stop="showPopup = false">取消</div>
      </div>
    </van-popup>
    <transition name="componentTab">
      <ChapterList
        v-if="showChapterList && bookInfo"
        @closeComponent="showChapterList = false"
        :bookInfo="bookInfo.entry"
        :readPage="readPage"
        @getPage="getPage"
      />
    </transition>
  </div>
</template>

<script>
import CommentItem from "@/components/comment/CommentItem.vue";
import CommentDetail from "@/components/comment/CommentDetail.vue";
import ChapterList from "@/components/detail/ChapterList.vue";
export default {
  components: {
    CommentItem,
    CommentDetail,
    ChapterList,
  },
  data: () => {
    return {
      showChapterList: false,
      showPopup: false, //分享
      showCommentDetail: false, //全部评论
      bookInfo: null,
      rate: 0,
      desShow: false,
      commentsList: null,
      isInBookself: false,
      readPage:1,//阅读到第几章，用于处理列表高亮
    };
  },
  computed: {
    img() {
      let url = this.bookInfo.entry.link.filter(
        (item) => item.type == "image/png"
      );
      return url[0].href;
    },
  },
  methods: {
    //加入书架
    addBookself() {
      this.api.payBookself(this.bookInfo.entry, this.isInBookself);
      !this.isInBookself
        ? this.$toast.success("加入成功")
        : this.$toast.success("移出成功");

      this.isInBookself = !this.isInBookself;
    },
    //跳阅读页
    toRead() {
      this.$router.push({
        name: "read",
        params: {
          bookid: this.bookInfo.entry.id,
        },
      });
    },
    //获取书籍信息
    getBookData() {
      if (this.bookInfo?.entry?.id == this.$route.params.bookid) return;
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/book/getsub.json?id=${this.$route.params.bookid}&title=${this.$route.params.title}`,
      }).then((res) => {
        this.bookInfo = res.data.feed;
        this.rate = parseFloat(this.bookInfo.entry["pris:ranking"].value);
        let bookselfList =
          JSON.parse(localStorage.getItem("bookselfList")) || [];
        this.isInBookself = bookselfList.some(
          (item) => item.id == this.bookInfo.entry.id
        );
        this.getPage();
      });
    },
    //获取书籍评论
    getCommentsList() {
      if (this.bookInfo?.entry?.id == this.$route.params.bookid) return;
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/comment/getComments.json?bookId=${this.$route.params.bookid}`,
      }).then((res) => {
        this.commentsList = res.data.all.list;
      });
    },
    getPage() {
      console.log(this.bookInfo);
      let book = JSON.parse(localStorage.getItem("readHistory")) || [];
      let page = 1;
      [].forEach.call(book, (item) => {
        if (item.bookInfo.id == this.bookInfo.entry.id) {
          page = item.page;
        }
      });
      this.readPage = page;
    },
  },
  activated() {
    this.getBookData();
    this.getCommentsList();
  },
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  background-color: var(--bgc-gray);
  box-sizing: border-box;
  padding-bottom: 0.5rem;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.25rem;
    padding: 0 0.15rem;
    color: var(--text-gray);
    border-bottom: 0.01rem solid var(--border-gray);
    background-color: var(--bgc-white);
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bgc-white);
    z-index: 100;

    .right {
      display: flex;
      align-items: center;

      .shop {
        font-size: 0.13rem;
        color: var(--text-red);
        border: 0.01rem solid var(--text-red);
        padding: 0 0.02rem;
        border-radius: 0.02rem;
        text-align: center;
        margin-right: 0.2rem;
      }

      .img-box {
        width: 0.22rem;
        height: 0.22rem;
        margin-left: 0.2rem;
        margin-top: 0.01rem;

        svg,
        path {
          fill: var(--text-gray);
        }
      }
    }
  }

  .book-info {
    width: 100%;
    box-sizing: border-box;
    padding: 0.1rem 0.15rem;
    background-color: var(--bgc-white);

    .first {
      display: flex;
      justify-content: space-between;

      .img-box {
        width: 0.94rem;
        min-width: 0.94rem;
        aspect-ratio: 94/136;
      }

      .right {
        flex-grow: 1;
        margin-left: 0.1rem;

        .title {
          font-size: 0.17rem;
        }

        .cauter {
          font-size: 0.13rem;
          margin: 0.1rem 0;

          .category {
            color: var(--text-gray);
          }

          .author {
            color: var(--text-blue2);
          }
        }

        .rate {
        }

        .click-count {
          font-size: 0.13rem;
          color: var(--text-gray);
          margin-bottom: 0.1rem;
        }

        .price {
          font-size: 0.15rem;
          color: var(--text-red);
        }
      }
    }

    .des {
      position: relative;
      font-size: 0.14rem;
      color: var(--text-gray);
      -webkit-line-clamp: 3;
      margin: 0.1rem 0;

      .icon {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .tag {
        margin: 0.1rem 0;

        > span {
          color: var(--text-blue);
        }
      }
    }

    .chapter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.2rem;
      color: var(--text-gray);
      border-top: 0.01rem solid var(--border-gray);
      padding-top: 0.1rem;

      .text {
        flex-grow: 1;
        font-size: 0.14rem;
        color: var(--text-black);
        margin-left: 0.1rem;
      }

      .tag {
        font-size: 0.12rem;
        color: var(--text-green1);
        margin-top: 0.01rem;
      }
    }
  }

  .comments {
    width: 100%;
    margin-top: 0.1rem;
    background-color: var(--bgc-white);
    box-sizing: border-box;
    padding: 0.15rem;

    .comments-header {
      width: 100%;
      color: var(--text-gray);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 0.18rem;
        position: relative;
        padding: 0 0.1rem;
        line-height: 0.18rem;

        &::before {
          position: absolute;
          left: 0;
          bottom: 0.02rem;
          content: "";
          width: 0.04rem;
          height: 0.14rem;
          background-color: var(--text-gray);
          border-radius: 0.02rem;
        }
      }

      .btn {
        font-size: 0.2rem;
        display: flex;
        align-items: center;
        padding: 0.02rem 0.05rem;
        border: 0.01rem solid var(--text-black);
        border-radius: 0.04rem;

        > div {
          font-size: 0.13rem;
        }
      }
    }

    .comments-content {
      > div {
        margin: 0.2rem 0;
      }

      .btn {
        width: 1.45rem;
        height: 0.36rem;
        box-sizing: border-box;
        border: 0.01rem solid var(--text-gray);
        font-size: 0.17rem;
        line-height: 0.36rem;
        text-align: center;
        color: var(--text-gray);
        border-radius: 0.04rem;
        margin: 0.5rem auto 0.2rem;
      }
    }
  }

  .footer {
    position: fixed;
    width: 100vw;
    height: 0.5rem;
    left: 0;
    bottom: 0;
    z-index: 100;
    background-color: var(--bgc-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.02rem solid var(--border-gray);

    > div {
      flex: 1;
      height: 100%;
      line-height: 0.5rem;
      text-align: center;
    }

    .bgc-red {
      background-color: var(--bgc-red);
      color: var(--text-white);
    }
  }

  .popup {
    width: 100%;
    height: 100%;
    background-color: var(--bgc-gray6);

    .text {
      padding: 0.2rem 0;
      text-align: center;
    }

    .popup-icon {
      width: 100%;
      box-sizing: border-box;
      overflow: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      .select {
        width: max-content;
        height: 100%;
        display: flex;
        justify-content: center;

        > div {
          margin: 0 0.15rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .img-box {
            width: 0.52rem;
            min-width: 0.52rem;
            height: 0.52rem;
            border-radius: 0.12rem;
            overflow: hidden;
          }

          .name {
            margin-top: 0.1rem;
            font-size: 0.12rem;
            text-align: center;
          }

          &:nth-child(2) {
            margin: 0 0.03rem;
          }
        }
      }
    }

    .btn {
      width: 100%;
      height: 0.5rem;
      margin-top: 0.2rem;
      line-height: 0.5rem;
      font-size: 0.17rem;
      text-align: center;
      box-sizing: border-box;
      border-top: 0.01rem solid #dfdfdf;
    }
  }
}
</style>